<template>
  <div>
    <div class="title">{{ title }}</div>
    <van-swipe :loop="false" :show-indicators="false" :width="300">
      <van-swipe-item v-for="item in list" :key="item.id">
        <img v-lazy="item.item_pic_url" width="100%" />
        <h2 class="info beyond_eip">
          {{ item.title }}
          <span class="price">{{ $global.toYuan(item.price_info) }}</span>
        </h2>
        <p class="subtitle beyond_eip">{{ item.subtitle }}</p>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: 'topicList',
  props: ['title', 'list']
}
</script>

<style scoped lang='less'>
.title {
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.2rem;
  background-color: #fff;
}
.info {
  line-height: 0.4rem;
  font-size: 0.18rem;
  width: 90%;
  .price {
    color: darkred;
    margin-left: 0.1rem;
  }
}
img {
  height: 2rem;
}
.subtitle {
  width: 90%;
  font-size: 0.14rem;
}
.van-swipe {
  padding: 0.08rem;
  background-color: #fff;
  .van-swipe-item {
    margin-right: 0.15rem;
    height: auto;
    padding-bottom: 0.1rem;
    background-color: #fff;
  }
}
</style>
